<template>
  <div>
    <MineTitleVue />
    <!-- <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button v-show="!show" round block type="info" @click="Tonext" native-type="submit">立即注册</van-button>
    <van-button v-show="show" round block type="info" @click="LoginJudgment">登录</van-button>
  </div>
</van-form> -->
    <!-- 手机号 -->
    <div class="phone-input">
      <div style="width: 60px">
        +86<span>&nbsp;<van-icon name="arrow" /></span>
      </div>
      <input
        style="width: 180px"
        type="text"
        placeholder="请输入手机号"
        v-model="value"
        @input="phoneLogin"
      />
    </div>
    <!-- 验证码 -->
    <div class="code-input">
      <input
        style="width: 140px"
        type="text"
        placeholder="请输入验证码"
        v-model="codeNum"
        
      />
      <span v-if="codeShow" style="color: red" @click="getPhoneCode"
        >获取验证码</span
      >
      <span v-if="!codeShow" class="count">{{ count }}秒后重试</span>
    </div>

    <!-- 验证码消息 -->
    <!-- <van-cell is-link title="基础用法" @click="show = true" /> -->
    <van-action-sheet
      class="code-content-p"
      v-model="codeinf"
      position="top"
      :overlay="false"
    >
      <div class="code-content">
        【小米】 登录/注册小米账号验证码:{{
          RNum
        }}，请勿转发，转发导致账号被盗，本验证码5分钟有效
      </div>
    </van-action-sheet>
    <!-- 下面的按钮 -->
    <div class="checkbox-btn">
      <input id="transparent-box" type="checkbox" class="checkbox-box" />
      <label for="transparent-box" @click="checkBtn"></label>
      <span>我已阅读并同意小米账号</span
      ><span style="color: #0b84ff"> 用户协议</span>和<span
        style="color: #0b84ff"
      >
        隐私政策</span
      >
    </div>
    <div class="other-login" v-show="!show">
      <div style="text-align: center">—— 其他登录方式 ——</div>
      <div class="my-icon">
        <van-icon size="50px" name="wechat" color="#02bc0f" />
        <div>
          <img style="width: 50px" src="@/assets/images/mine/微博.png" alt="" />
        </div>
        <van-icon size="50px" name="alipay" color="skyblue" />
      </div>
    </div>

    <!-- 登录按钮 -->
    <div style="margin: 16px">
      <van-button v-show="show && !gopwd" round block type="info" disabled
        >登录</van-button
      >
        <van-button v-show="show && gopwd && !checkedbtn" round block type="info" @click="gopwdbtn"
          >登录</van-button
        >
        <van-button v-show="show && gopwd && checkedbtn" round block type="info" @click="ConfirmLogin"
          >登录</van-button
        >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import MineTitleVue from "@/components/Mine/MineTitle.vue";
export default {
  data() {
    return {
      // username: '',
      // password: '',
      // check: '',
      // checkindex:'',
      nope:false,
      checkedbtn:false,
      codeNum: "",
      value: "",
      show: false,
      gopwd: false,
      codeinf: false,
      codeShow: true,
      timer: null,
      count: "",
    };
  },
  methods: {
    //   onSubmit(values) {
    //   console.log('submit', values);
    //   localStorage.loginItem = JSON.stringify(values)
    //   this.username = ""
    //   this.password = ""
    // },
    // LoginJudgment() {
    //   // console.log("哈哈哈");
    //    if(this.username == JSON.parse(localStorage.loginItem).用户名 && this.password == JSON.parse(localStorage.loginItem).密码){
    //             Toast("登入成功！")

    //    }else{
    //        Toast("登入失败，请重新登入！")
    //    }
    // },
    // Tonext(){
    //   if(this.username != "" && this.password != ""){
    //       this.show = true
    //       Toast("注册成功")
    //   }else{
    //     Toast("账号或密码不能为空")
    //   }
    // },
    phoneLogin() {
      if (this.value.trim()) {
        let reg =
          /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
        this.show = true;
        if (reg.test(this.value)) {
          this.gopwd = true;
        }
      } else {
        this.show = false;
        this.gopwd = false;
      }
    },
    checkBtn() {
      this.checkedbtn = !this.checkedbtn;
    },
    gopwdbtn() {
      // if(this.checkedbtn){
      //     for(let i = 0;i<this.$store.state.login.length;i++){
      //       if(this.value.trim() == this.$store.state.login[i].account){
      //             this.check = 1
      //             this.checkindex = i
      //                 break

      //      }else{
      //               this.check = 2
      //      }
      //     }
      //     if(this.check == 1){
      //        this.$router.push({name:'loginaccount', params: {index: this.checkindex}})
      //        this.$store.commit("changeLoginindex",this.checkindex)
      //     }else if(this.check == 2){
      //       this.$router.push({name: 'account', params: {myphone: this.value.trim()}})
      //     }
      //   }
      // if (this.checkedbtn) {
      //   this.gopwd = true;
      // } else {
      //   this.gopwd = false;
        Toast({
          message: "请勾选同意相关协议",
        });
        console.log(1231231);
      // }
    },
    getPhoneCode() {
      if (this.value.trim()) {
        let reg =
          /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
        if (reg.test(this.value)) {
          const TIME_COUNT = 60;
          this.codeinf = true;
          //开启定时器
          window.timeInterval = setInterval(() => {
            this.codeinf = false;
          }, 1000 * 4);

          if (!this.timer) {
            this.count = TIME_COUNT;
            this.codeShow = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.codeShow = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          Toast("请输入正确的手机号");
        }
      }
    },
    ConfirmLogin(){
       this.nope = false;
       if(this.codeNum == this.RNum.trim()){ 
        this.$store.commit("changeaccount",this.value)
        this.$store.commit("changeLoginstate",true)
        for(let i = 0;i<this.$store.state.login.length;i++){
          if(this.value == this.$store.state.login[i].account){
            let loginidex = i
            this.$store.commit("changeindex",loginidex)
            console.log("11111",this.$store.state.loginindex);
            this.nope = true
                break
          }
        }
        if(!this.nope){   
            let a = {account:this.value,address:[]}
            this.$store.commit("changelogin",a)
            this.$store.commit("changeindex",this.$store.state.login.length-1)
            console.log(this.$store.state.login);
            console.log(this.$store.state.loginindex);
        }
        Toast("登录成功");
        this.$router.push({name:"mine"})
        // this.$toast(111)
       }else{
        Toast("登录失败，请重试");
       }
    }
  },
  computed: {
    // 随机验证码
      RNum() {
      let a = " ";
      for (let i = 0; i < 6; i++) {
        a += Math.floor(Math.random() * 10);
      }
      //  this.codeNum2 = a
      // console.log(a);
      return a;
    },
  },
  components: {
    MineTitleVue,
  },
};
</script>
<style lang="scss" scoped>
.phone-input {
  width: 230px;
  // height: 40px;
  display: flex;
  margin: 0 auto;
  background: rgba(240, 240, 240, 1);
  // background-color: #fff;
  border: #fff 1px solid;
  padding: 10px 0 10px 10px;
  border-radius: 12px;
  line-height: 20px;
  input {
    background: rgba(240, 240, 240, 1);
    width: 140px;
    height: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    caret-color: var(--yellow);
    border: none;
  }
  input::-webkit-input-placeholder {
    color: #cfcfcf;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cfcfcf;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cfcfcf;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cfcfcf;
  }
}
.code-input {
  width: 230px;
  // height: 40px;
  display: flex;
  margin: 20px auto;
  background: rgba(240, 240, 240, 1);
  // background-color: #fff;
  border: #fff 1px solid;
  padding: 10px 0 10px 10px;
  border-radius: 12px;
  line-height: 20px;
  input {
    background: rgba(240, 240, 240, 1);
    width: 140px;
    height: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    caret-color: var(--yellow);
    border: none;
  }
  input::-webkit-input-placeholder {
    color: #cfcfcf;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cfcfcf;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cfcfcf;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cfcfcf;
  }
}
.code-content-p {
  height: 10%;
  background: inherit;
  background: #f0f0f0;
  filter: blur(50%);
  z-index: -1;
  .code-content {
    margin: 10px 0;
  }
}
.checkbox-btn {
  font-size: 12px;
  margin-top: 20px;
  text-align: center;
  position: relative;
  #transparent-box + label {
    display: inline-block;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: transparent;
    border: #976232 1px solid;
    border-radius: 3px;
    position: absolute;
    top: 4px;
    left: 47px;
  }
  #transparent-box:checked + label::before {
    position: absolute;
    top: -7px;
    left: 0;
    display: inline-block;
    content: "\2714";
    font-size: 16px;
  }
  input[type="checkbox"] {
    visibility: hidden;
  }
}
.other-login {
  position: absolute;
  left: 45px;
  bottom: 35px;
  width: 300px;
  margin: 0 auto;
  margin-top: 50px;
  .my-icon {
    width: 250px;
    margin: 35px auto;
    display: flex;
    justify-content: space-between;
  }
}
</style>